组合式 API

组合式 API 中的导入以及顶层变量以及函数都可以直接使用。响应式更新的核心在于 ref。使用 ref 包裹的变量可以变成响应式的变量，可以直接在 template以及 script 中使用或者更新。

ref可以绑定到组件的属性，使用方法为:prop="refValue"进行绑定，"" 当中不止可以只写 refValue还可以直接写 js 的代码，例如 :prop="refValue? a:b"。也可以绑定到显示的内容，使用 进行绑定，中同样可以写简单的 js 代码。

<script setup>
  import { ref, onMounted } from 'vue'

  // 响应式状态
  const count = ref(0)

  // 用来修改状态、触发更新的函数
  function increment() {
    count.value++
  }

  // 生命周期钩子
  onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
  })
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

组件的相关声明

VUE 中可给组件自定义各种功能，外部组件在声明这个组件的时候可以通过关键字开启这些功能。

支持的功能包括：属性、事件、v-model，指令

v-model 的属性和属性类似，但是属性只能单向绑定，数据从父组件流向子组件，在子组件中无法修改数据的值，正常的修改属性的值需要结合事件传递新的值，在父组件中更新新的值，v-model 简化了这一过程。

示例代码如下：

<script setup lang="ts">
  import { ref } from "vue";
  defineOptions({
    name: "EditableSteps"
  });
  // 定义自定义属性，父组件可以通过 :psimple="value" peditable="true" 静态地或者动态地指定属性的值
  const props = defineProps({
    psimple: {
      type: Boolean,
      default: false
    },
    peditable: {
      type: Boolean,
      default: false
    }
  });
  // 定义自定义事件，父组件可以通过@update-current="event" 来绑定事件
  const emit = defineEmits(["update-current"]);

  // v-model
  const vmCurrent = defineModel<number>("current", { default: 0 });
  const vmSteps = defineModel<Array<string>>("steps", { default: [] });

  // 切换到指定步骤
  function setActiveStep(index) {
    // 非可编辑模式
    if (!props.peditable) {
      return;
    }
    // 验证步骤的有效性
    if (index >= 0 && index <= vmSteps.value.length - 1) {
      vmCurrent.value = index + 1;
    }
    // 触发更新事件
    emit("update-current", vmCurrent.value);
  }
</script>

<template>
  <div class="w-full">
    <el-steps
      :active="vmCurrent"
      finish-status="success"
      class="w-full"
      :simple="props.psimple"
      >
      <el-step
        v-for="(step, index) in vmSteps"
        :key="index"
        class="select-none"
        :class="props.peditable ? 'cursor-pointer' : ''"
        :title="step"
        @click="() => setActiveStep(index)"
        />
    </el-steps>
  </div>
</template>

  <style lang="scss" scoped></style>

特殊模版指令

vue 中提供了多种可以帮助控制界面显示的指令。例如

Vue.js中的v-for和v-if是两个非常常用且强大的指令，用于列表渲染和条件渲染。下面分别给出它们的基本用法以及结合使用的示例。

v-for 指令

v-for指令用于遍历数组、对象或整数区间来渲染列表。基本语法是 v-for="item in items"，其中items是你要遍历的数据源，item是当前遍历到的元素的别名。遍历所生成的对象需要指定一个额外的 :key参数用于唯一的标识对象的序号。

示例代码：

<template>
  <div>
    <ul>
      <!-- 遍历数组 -->
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>

    </ul>
    <!-- 遍历对象 -->
    <ul>
      <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>

    </ul>
    <!-- 遍历整数 -->
    <div v-for="n in 5" :key="n">{{ n }}</div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ],
      user: {
        name: 'Alice',
        age: 30,
        city: 'New York'
      }
    };
  }
};
</script>

v-if 指令

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时被渲染。

示例代码：

<template>
  <div>
    <!-- 条件渲染 -->
    <p v-if="seen">true show</p>
    <p v-else>false show</p>
  </div>

</template>

<script>
export default {
  data() {
    return {
      seen: true
    };
  }
};
</script>